<template>
  <div>
    <el-dialog
      title="有蚁列表→处理日志"
      :visible.sync="show"
      :before-close="cancelMessage"
      width="40%"
    >
      <el-table v-loading="loading" :data="messageList" border stripe :key="2">
        <!-- <el-table-column label="ID" align="center" prop="logId"/> -->
        <el-table-column label="点位号" align="center" prop="pointNumber" />
        <el-table-column label="处理人员" align="center" prop="handleName" />
        <el-table-column label="处理结果" align="center" prop="handleResult" />
        <el-table-column label="处理时间" align="center" prop="handleTime" />

        <el-table-column
          label="处理凭证"
          align="center"
          class-name="small-padding fixed-width"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="messageEdit(scope.row)"
              >查看凭证</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" plain @click="cancelMessage" size="small"
          >返回</el-button
        >
      </span>
      <el-dialog
        title="查看凭证"
        :visible.sync="voucherVisible"
        width="30%"
        append-to-body
      >
        <div v-loading="!imgUrl" style="min-height: 200px">
          <el-image
            v-if="imgUrl"
            style="width: 100%; height: 100%"
            :src="imgUrl"
            fit="fill"
          ></el-image>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryMonitorCompanyData, // 监测公司查询
  queryHandleLog, // 查询处理
} from "@/api/manage/asset";
export default {
  name: "log",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    detailDis: {
      type: Boolean,
      default: false,
    },
    itemForm: {},
    id: {
      tyep: String,
      default: "",
    },
  },
  data() {
    return {
      messageList: [],
      messageTotal: 0,
      loading: false,
      imgUrl: "",
      voucherVisible: false,
    };
  },
  computed: {},
  created() {
    this.init();
    queryMonitorCompanyData().then((res) => {
      if (res.errorCode == "000000") {
        this.jcCompanyList = res.data;
      }
    });
  },
  methods: {
    init() {
      queryHandleLog({ id: this.id }).then((res) => {
        if (res.errorCode == "000000") {
          this.messageList = res.data.list;
          this.messageTotal = res.data.total;
        }
      });
    },
    cancelMessage() {
      this.$emit("closeMsg");
    },
    messageEdit(row) {
      if (!row.voucher) {
        this.$modal.msgWarning("该记录没有照片");
        return;
      }

      // 直接使用完整的 URL
      this.voucherVisible = true;
      this.imgUrl = row.voucher;
    },
  },
};
</script>
<style lang="scss" scoped>
.red {
  color: red;
  margin-right: 2px;
  vertical-align: top;
}
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
::v-deep .el-dialog__footer {
  border-top: 1px solid #e9e9ec;
}
</style>
